var option;
var menu = [
{name:'椭圆',type:'ellipse',list:[
	{name:'ellipse_001',value:'ellipse_001.png',
		option:"{\n"+
		"   type:'ellipse',\n"+
		"   left:120,\n"+
		"   top:160,\n"+
		"   w:260,\n"+
		"   h:180,\n"+
	    "   color: '#fd0104',\n"+
		"   text:'椭圆',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   },\n"+
		"   bg:'#FFFFFF',\n"+
		"   is3d:false\n"+
		"}"
	},
	{name:'ellipse_002',value:'ellipse_002.png',
		option:"{\n"+
		"   type:'ellipse',\n"+
		"   left:120,\n"+
		"   top:160,\n"+
		"   w:180,\n"+
		"   h:260,\n"+
	    "   color: '#0df104',\n"+
		"   text:'椭圆',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   },\n"+
		"   bg:'#FFFFFF'\n"+
		"}"
	}]},
{name:'半圆',type:'semicircle',list:[
	{name:'semicircle_001',value:'semicircle_001.png',
		option:"{\n"+
		"   type:'semicircle',\n"+
		"   subType:'left',//【left,top,right,bottom】\n"+
		"   left:150,\n"+
		"   top:100,\n"+
		"   w:300,\n"+
		"   h:300,\n"+
		"   color: '#c1890a',\n"+
		"   text:'半圆',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   },\n"+
		"   is3d:false\n"+
		"}\n"
	},
	{name:'semicircle_002',value:'semicircle_002.png',
		option:"{\n"+
		"   type:'semicircle',\n"+
		"   subType:'right',//【left,top,right,bottom】\n"+
		"   left:150,\n"+
		"   top:100,\n"+
		"   w:300,\n"+
		"   h:300,\n"+
		"   color: '#c1890a',\n"+
		"   text:'半圆',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   },\n"+
		"   is3d:false\n"+
		"}\n"
	},
	{name:'semicircle_003',value:'semicircle_003.png',
		option:"{\n"+
		"   type:'semicircle',\n"+
		"   subType:'bottom',//【left,top,right,bottom】\n"+
		"   left:150,\n"+
		"   top:100,\n"+
		"   w:300,\n"+
		"   h:300,\n"+
		"   color: '#c1890a',\n"+
		"   text:'半圆',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   },\n"+
		"   is3d:true\n"+
		"}\n"
	},
	{name:'semicircle_004',value:'semicircle_004.png',
		option:"{\n"+
		"   type:'semicircle',\n"+
		"   subType:'top',//【left,top,right,bottom】\n"+
		"   left:150,\n"+
		"   top:100,\n"+
		"   w:300,\n"+
		"   h:300,\n"+
		"   color: '#c1890a',\n"+
		"   text:'半圆',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   },\n"+
		"   is3d:true\n"+
		"}\n"
	}]},
{name:'梯形',type:'ladder',list:[
	{name:'ladder_001',value:'ladder_001.png',
		option:"{\n"+
		"   type:'ladder',\n"+
		"   left:180,\n"+
		"   top:100,\n"+
		"   tw:200,\n"+
		"   bw:80,\n"+
		"   h:200,\n"+
		"   color: '#61a0aa',\n"+
		"   text:'梯形',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   }\n"+
		"}"
	}]},
{name:'漏斗',type:'hopper',list:[
	{name:'hopper_001',value:'hopper_001.png',
		option:"{\n"+
		"   type:'hopper',\n"+
		"   left:150,\n"+
		"   top:100,\n"+
		"   tw:330,\n"+
		"   bw:80,\n"+
		"   h:300,\n"+
		"   colors: ['#9dc432','#55b8d7','#fcc006','#e6c093'],\n"+
		"   text:'方程你上课',\n"+
		"   fn:function(index,data){\n"+
		"      console.log(index,data[index].data);\n"+
		"   },\n"+
		"   data:[\n"+
		"      {value: 60, name: '问题名称1和违标次数',list:[{name:'值',value:1314}]},\n"+
		"      {value: 40, name: '问题名称2和违标次数',list:[{name:'值',value:1314}]},\n"+
		"      {value: 20, name: '问题名称3和违标次数',list:[{name:'值',value:1314}]},\n"+
		"      {value: 80, name: '问题名称4和违标次数',list:[{name:'值',value:1314}]},\n"+
		"      {value: 100, name: '问题名称5和违标次数',list:[{name:'值',value:1314}]}\n"+
		"   ],\n"+
		"   gap:10,\n"+
		"   label:{\n"+
		"      show:true,\n"+
		"      style:{\n"+
		"         left:'right',\n"+
		"         top:'middle',\n"+
		"         color:'#000',\n"+
		"         fontSize:16,\n"+
		"         width:200\n"+
		"      }\n"+
		"   },\n"+
		"   arc:'in', //in,out,\n"+
		"   tip:{\n"+
		"      show:true,\n"+
		"      style:{\n"+
		"         width:'200',\n"+
		"         borderRadius:6\n"+
		"      }\n"+
		"   },\n"+
	    "   scrollBox:'right-content'\n"+
        "}\n"
	},
	{name:'hopper_002',value:'hopper_002.png',
		option:"{\n"+
		"   type:'hopper',\n"+
		"   left:150,\n"+
		"   top:100,\n"+
		"   tw:330,\n"+
		"   bw:80,\n"+
		"   h:300,\n"+
		"   colors: ['#ff9915','#ffdb15','#baff15','#46e621','#00df93','#00addf','#1a86ff','#8e49ff','#ff49f9','#fd8c8c'],\n"+
		"   fn:function(index,data){\n"+
		"      console.log(index,data[index].data);\n"+
		"   },\n"+
		"   data:[\n"+
		"      {value: 60, name: '问题名称1和违标次数',list:[{name:'爱你',value:1314}]},\n"+
		"      {value: 40, name: '问题名称2和违标次数',list:[{name:'一直',value:521}]},\n"+
		"      {value: 20, name: '问题名称3和违标次数',list:[{name:'值',value:1314}]},\n"+
		"      {value: 80, name: '问题名称4和违标次数',list:[{name:'值',value:1314}]},\n"+
		"      {value: 100, name: '问题名称5和违标次数',list:[{name:'值',value:1314}]}\n"+
		"   ],\n"+
		"   gap:10,\n"+
		"   label:{\n"+
		"      show:true,\n"+
		"      style:{\n"+
		"         left:10,\n"+
		"         top:'middle',\n"+
		"         color:'#000',\n"+
		"         fontSize:16,\n"+
		"         width:200\n"+
		"      }\n"+
		"   },\n"+
		"   arc:'out', //in,out,\n"+
		"   tip:{\n"+
		"      show:true,\n"+
		"      style:{\n"+
		"         width:'200',\n"+
		"         borderRadius:6\n"+
		"      }\n"+
		"   },\n"+
	    "   scrollBox:'right-content',\n"+
	    "   sun_shadow:true\n"+
        "}\n"
		}]},
{name:'心形',type:'heart',list:[
	{name:'heart_001',value:'heart_001.png',
		option:"{\n"+
		"   type:'heart',\n"+
		"   left:100,\n"+
		"   top:100,\n"+
		"   w:300,\n"+
		"   h:300,\n"+
		"   color: '#aa0000',\n"+
		"   n:2,\n"+
		"   borderWidth:1,\n"+
		"   text:'心形',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   },\n"+
		"   background:'#FF0000'\n"+
		"}\n"
	},
	{name:'heart_002',value:'heart_002.png',
		option:"{\n"+
		"   type:'heart',\n"+
		"   left:100,\n"+
		"   top:100,\n"+
		"   w:300,\n"+
		"   h:300,\n"+
		"   color: '#aa0000',\n"+
		"   n:36,\n"+
		"   borderWidth:1,\n"+
		"   animal:true,\n"+
		"   text:'心形',\n"+
		"   fn:function(data){\n"+
		"      console.log(data);\n"+
		"   }\n"+
		"}\n"
	}]}
];
function init(){
	var bodyW = $('body').width();
	var bodyH = $('body').height();
	var contentH = bodyH-$('.header').height();
	$('.content').height(contentH);
	$('#right-content').width(bodyW-$("#left-menu").width());
	$("#left-menu").height(contentH);
	$('#right-content').height(contentH);
	$('.content-code').height(contentH-56);
	$('.content-chart').height(contentH-56);
	setdata();
}
function setdata(){
	var menuHtml = '<ul class="menu-ul">';
	var contentHtml = '',list;
	for(var i=0;i<menu.length;i++){
		menuHtml+='<li class="menu-li"><a href="#huatu-item-00'+i+'">'+menu[i].name+'</a></li>';
		contentHtml+='<div class="huatu-item" id="huatu-item-00'+i+'"><div class="header hei50">'+menu[i].name+'</div>';
		contentHtml+='<div class="item-content"><ul class="menu-ul item-menu" type="'+menu[i].type+'">';
		list = menu[i].list;
		for (var j=0;j<list.length;j++) {
			contentHtml+='<li><img class="item-img" src="img/item/'+list[j].value+'" onclick="itemClick('+i+','+j+')" /></li>'
		}
		contentHtml+='</ul></div></div>';
	}
	menuHtml+='</ul>';
	$("#left-menu").empty();
	$("#left-menu").append(menuHtml);
	$('#right-content').empty();
	$('#right-content').append(contentHtml);
}
function itemClick(i,j){
	var item = menu[i].list[j];
//	var param = encodeURIComponent('option='+JSON.stringify(item.option));
	var param = encodeURIComponent('option='+item.option);
	window.open('html/chart_div.html?option='+param);
}
function ellipse(){
	var lyy0 = new Lyy('huatu-item-000-ellipse');
	option={
		type:'ellipse',
		left:120,
		top:160,
		w:260,
		h:180,
    	color: '#fdf1c4',
		text:'椭圆',
		fn:function(data){
			console.log(data);
		},
		bg:'#2b2b2b'
	}
	lyy0.setParam(option);
	$('#ellipse-btn').on('click',function(){
		var code = $('#ellipse-text').val();
		eval(code);
		lyy0.clear();
		lyy0.setParam(option);
	});
}
function semicircle(){
	var lyy1 = new Lyy('huatu-item-001-semicircle');
	option={
		type:'semicircle',
		subType:'bottom',//【left,top,right,bottom】
		left:50,
		top:100,
		w:400,
		h:300,
		color: '#c1890a',
		text:'半圆',
		fn:function(data){
			console.log(data);
		}
	}
	lyy1.setParam(option);
	$('#semicircle-btn').on('click',function(){
		var code = $('#semicircle-text').val();
		eval(code);
		lyy1.clear();
		lyy1.setParam(option);
	});
}
function ladder(){
	var lyy2 = new Lyy('huatu-item-002-ladder');
	option={
		type:'ladder',
		left:100,
		top:100,
		tw:300,
		bw:80,
		h:300,
		color: '#61a0aa',
		text:'梯形',
		fn:function(data){
			console.log(data);
		}
	}
	lyy2.setParam(option);
	$('#ladder-btn').on('click',function(){
		var code = $('#ladder-text').val();
		eval(code);
		lyy2.clear();
		lyy2.setParam(option);
	});
}
function hopper(){
	var lyy4 = new Lyy('huatu-item-003-hopper');
	option={
		type:'hopper',
		left:150,
		top:100,
		tw:330,
		bw:80,
		h:300,
    	colors: ['#9dc432','#55b8d7','#fcc006','#e6c093','#cb4ce0','#2176ca','#008000'],
		text:'方程你上课',
		fn:function(index,data){
			console.log(index,data[index].data);
		},
		data:[
            {value: 60, name: '问题名称1和违标次数',list:[]},
            {value: 40, name: '问题名称2和违标次数',list:[]},
            {value: 20, name: '问题名称3和违标次数',list:[]},
            {value: 80, name: '问题名称4和违标次数',list:[]},
            {value: 100, name: '问题名称5和违标次数',list:[]}
        ],
		gap:10,
		textStyle:{
			left:10,
			top:'middle',
			color:'#000',
			fontSize:16
		}
	}
	lyy4.setParam(option);
	$('#hopper-btn').on('click',function(){
		var code = $('#hopper-text').val();
		eval(code);
		lyy4.clear();
		lyy4.setParam(option);
	});
}
function heart(){
	var lyy4 = new Lyy('huatu-item-004-heart');
	option={
		type:'heart',
		left:100,
		top:100,
		w:300,
		h:300,
		color: '#aa0000',
		n:36,
		borderWidth:1,
		animal:true,
		text:'心形',
		fn:function(data){
			console.log(data);
		}
	}
	lyy4.setParam(option);
	$('#heart-btn').on('click',function(){
		var code = $('#heart-text').val();
		eval(code);
		lyy4.clear();
		lyy4.setParam(option);
	});
}
function huatu(){
	ellipse();
	semicircle();
	ladder();
	hopper();
	heart();
}
$(document).ready(function(){
	init();
	huatu();
});